<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../lib/metro.css" rel="stylesheet">

    <title>Test Remote Table - Metro UI :: Popular HTML, CSS and JS library</title>
    <style>
        .data-cell-id {
            text-align: center;
        }
        .data-cell-price {
            text-align: right;
        }
        .data-cell-discountPercentage, .data-cell-discountedPrice {
            text-align: right;
        }
    </style>
</head>
<body class="cloak">
<nav data-role="appbar" class="border-bottom bd-default" lang="ua">
    <span class="app-bar-item">Remote Table</span>
    <div class="app-bar-item-static no-hover">
        <input type="checkbox" data-role="theme-switcher"/>
    </div>
    <div class="app-bar-item-static no-hover">
        <div class="text-leader">Remote Table</div>
    </div>
</nav>

<div class="container-fluid pt-10">
    <div class="container container-query">
        <div data-role="remote-table"
             data-page-mode="page"
             data-offset="1"
             data-key-offset="page"
             data-key-data="data"
             data-key-limit="perPage"
             data-key-total="totalProducts"
             data-key-sort="sortBy"
             data-key-order="order"
             data-key-search="q"
             data-fields="_id, title, price, discountedPrice"
             data-sortable-fields="id, title, price, discountedPrice"
             data-col-size="30,,150,150"
             data-captions="ID, Title, Price, Discounted Price"
             data-sort="_id"
             data-url='https://fakestoreapiserver.reactbd.org/api/products'
             data-cls-table="table-border striped row-hover responsive-sm"
             data-cls-pagination="mt-4 d-flex flex-justify-center"
        ></div>
    </div>
</div>

<div class="container-fluid mt-10">
    <div class="container">
        <div data-role="remote-table"
             data-caption="Products"
             data-key-offset="skip"
             data-key-search="q"
             data-key-limit="limit"
             data-key-data="products"
             data-key-total="total"
             data-key-sort="sortBy"
             data-key-order="order"
             data-fields="id, title, price, discountPercentage"
             data-sortable-fields="id, title, price, discountPercentage"
             data-col-size="30,,150,150"
             data-captions="ID, Title, Price, Discount Price"
             data-sort="id"
             data-url='https://dummyjson.com/products'
             data-url-search='https://dummyjson.com/products/search'
             data-on-draw-cell="drawCell"
             data-cls-table="table-border striped row-hover responsive-sm"
             data-cls-pagination="mt-4 d-flex flex-justify-center"
        ></div>
    </div>
</div>

<div class="container-fluid mt-10">
    <div class="container d-flex flex-row gap-2">
        <input type="text" id="search">
        <select name="" id="rows"></select>
    </div>
    <div class="container">
        <div data-role="remote-table"
             data-caption="Products"
             data-key-offset="skip"
             data-key-search="q"
             data-key-limit="limit"
             data-key-data="products"
             data-key-total="total"
             data-key-sort="sortBy"
             data-key-order="order"
             data-fields="id, title, price, discountPercentage"
             data-sortable-fields="id, title, price, discountPercentage"
             data-col-size="30,,150,150"
             data-captions="ID, Title, Price, Discount Price"
             data-sort="id"
             data-url='https://dummyjson.com/products'
             data-url-search='https://dummyjson.com/products/search'
             data-on-draw-cell="drawCell"
             data-cls-table="table-border striped row-hover responsive-sm"
             data-cls-pagination="mt-4 d-flex flex-justify-center"
             data-search-control="#search"
             data-rows-count-control="#rows"
        ></div>

    </div>
</div>

<script src="../lib/metro.js"></script>
<script>
    function drawCell(cell, value, name, record, index){
        if (name === 'price') {
            cell.innerHTML = ( `<span class="${value > 100 ? "fg-red" : ""}">$${value}</span>` )
        }
        if (name === 'discountedPercentage') {
            cell.innerHTML = ( `${value}%` )
        }
    }
</script>
</body>
</html>
